<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" @submit="addSubmit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="事件编码" prop="eventCode">
                <a-input v-model.trim="form.eventCode" :disabled="disabled" placeholder="请填写事件编码" />
            </a-form-model-item>
            <a-form-model-item label="事件名称" prop="eventName">
                <a-input v-model.trim="form.eventName" placeholder="请填写事件名称" />
            </a-form-model-item>
            <a-form-model-item label="产品属性" prop="attCode">
                <a-select v-model="form.attCode" show-search optionFilterProp="name" placeholder="请选择产品属性">
                    <a-select-option v-for="item in property" :name="item.attName+item.attCode" :value="item.attCode" :key="item.attCode">
                        {{ item.attName }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="事件类型" v-if="form.attCode" prop="eventType">
                <a-select v-model="form.eventType" placeholder="请选择事件类型">
                    <a-select-option v-for="item in alarmTypes" :value="item.value" :key="item.value">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="事件值" prop="eventValue">
                <a-input-number
                    v-if="isBool"
                    v-model.trim="form.eventValue"
                    :min="0"
                    :max="1"
                    :precision="0"
                    placeholder="请填写事件值"
                    style="width:100%;"
                />
                <a-input-number
                    v-else
                    :min="0"
                    :precision="0"
                    v-model.trim="form.eventValue"
                    placeholder="请填写事件值"
                    style="width:100%;"
                />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { alarmBoolTypes, alarmCrossTypes } from '../operator';
import { addInfo, updateInfo } from '@/api/product/alarm';

export default {
    name: 'propertyInfo',
    props: {
        productCode: String,
        info: Object,
        property: []
    },
    data() {
        return {
            rules,
            alarmBoolTypes,
            alarmCrossTypes,
            alarmTypes: [],
            loading: false,
            form: {
                eventName: '',
                eventCode: '',
                eventType: undefined,
                eventValue: '',
                attCode: undefined,
                pdtCode: this.productCode
            },
            lastBool:false,
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            }
        };
    },
    computed: {
        title() {
            return this.info.id ? '修改事件' : '新增事件';
        },
        disabled() {
            return this.info?.id ? true : false;
        },
        isBool() {
            let property = this.property;
            let attCode = this.form.attCode;
            let isBool = false;
            property.map(item => {
                if (item.attCode == attCode) {
                    if (item.dataType == 'bool') {
                        isBool = true;
                    }
                }
            });
            if(this.lastBool!=isBool){
                this.form.eventType = undefined;
            }
            if (isBool) {
                this.lastBool = true
                this.alarmTypes = this.alarmBoolTypes;
            } else {
                this.lastBool = false
                this.alarmTypes = this.alarmCrossTypes;
            }
            return isBool;
        }
    },
    created() {
        this.form = { ...this.form, ...this.info };
    },
    methods: {
        //添加
        addSubmit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.loading = true;
                    try {
                        if (this.form.id) {
                            await updateInfo(this.form);
                            this.$message.success('修改成功!');
                        } else {
                            await addInfo(this.form);
                            this.$message.success('添加成功!');
                        }
                        this.$emit('submit');
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
